<template>
  <div class="drag-panel">
    <div class="drag-box"
         @click="handleClickSelect"
         @drop.prevent="handleDrop"
         @dragenter.stop
         @dragleave.stop="panelText = '点击选择或拖入文件（目录）'"
         @dragover.prevent="panelText = '请松开'">
      {{ panelText }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {panelText, handleDrop, handleClickSelect} from "../uses/useFiles";
</script>

<style scoped lang="scss">
.drag-panel {
  height: 100%;
  width: 100%;
  padding: 20px;
  user-select: none;
  box-sizing: border-box;

  .drag-box {
    height: 100%;
    box-sizing: border-box;
    border: 10px dashed #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
  }
}
</style>
